'use client'
import React, { useState } from 'react'
import CustomLoad from '@/components/CustomLoad'


export default function ContactPage() {
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        setIsSubmitting(true)

        // 获取表单数据
        const formData = new FormData(e.target as HTMLFormElement)
        const name = formData.get('name') as string || ''
        const email = formData.get('email') as string || ''
        const content = formData.get('content') as string || ''
        const phone = formData.get('phone') as string || ''

        // 客户端验证
        if (!name.trim() || !email.trim() || !content.trim() || !phone.trim()) {
            alert('请填写完整信息')
            setIsSubmitting(false)
            return
        }

        // 邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        if (!emailRegex.test(email)) {
            alert('请输入有效的邮箱地址')
            setIsSubmitting(false)
            return
        }
        // 手机号格式验证
        const phoneRegex = /^1[3-9]\d{9}$/
        if (!phoneRegex.test(phone)) {
            alert('请输入有效的手机号')
            setIsSubmitting(false)
            return
        }

        try {
            // 调用API提交表单
            const response = await fetch('/api/contact', {
                method: 'POST',
                body: formData
            })

            const result = await response.json()

            if (result.success) {
                alert('提交成功!');
                // 重置表单
                (e.target as HTMLFormElement).reset()
            } else {
                alert(result.message || '提交失败')
            }
        } catch (error) {
            console.error('提交失败:', error)
            alert('提交失败，请重试')
        } finally {
            setIsSubmitting(false)
        }
    }

    // 提交按钮
    const [isSubmitting, setIsSubmitting] = useState(false)
    return (
        <div className='max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 rounded-xl shadow-md border border-gray-200 dark:border-gray-800 mt-8'>
            <h1 className='text-2xl font-bold mb-6 text-center text-gray-900 dark:text-white'>联系我们</h1>
            {isSubmitting && <CustomLoad />}
            <form onSubmit={handleSubmit} className='space-y-4'>
                <div className="mb-4">
                    <label htmlFor='name' className="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">姓名</label>
                    <input
                        name='name'
                        id='name'
                        type='text'
                        placeholder='请输入姓名'
                        className='w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-all'
                        required
                    />
                </div>
                <div className='mb-4'>
                    <label htmlFor='phone' className="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">手机号</label>
                    <input
                        name='phone'
                        id='phone'
                        type='tel'
                        placeholder='请输入手机号'
                        className='w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-all'
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor='email' className="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">邮箱</label>
                    <input
                        name='email'
                        id='email'
                        type='email'
                        placeholder='请输入邮箱'
                        className='w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-all'
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor='content' className="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">内容</label>
                    <textarea
                        name='content'
                        id='content'
                        placeholder='请输入内容'
                        rows={4}
                        className='w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none'
                        required
                    ></textarea>
                </div>
                <button
                    type="submit"
                    className='w-full px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-gray-900'
                    disabled={isSubmitting}
                >
                    {isSubmitting ? '提交中...' : '提交'}
                </button>
            </form>
        </div>
    )
}